<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="shortcut icon" href="../content/static/img/favicon.ico">
    <link href="../content/css/common_modal.css" rel="stylesheet">
    <link href="../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../content/js/lib/vue/select2.min.css" rel="stylesheet">
    <link href="../content/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../content/static/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="../content/static/css/animate.min.css" rel="stylesheet">
    <link href="../content/static/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"
          rel="stylesheet">
    <link href="../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <link href="../content/static/js/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" />
    <link href="../content/js/lib/calendar/calendar.css" rel="stylesheet">
    <link href="../content/js/lib/calendar/scrollbar.css" rel="stylesheet">
    <link href="../content/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../content/static/css/plugins/chosen/chosen.css" rel="stylesheet">


    <style>
        .fa-female:before {
            color: #fb7cd5;
        }

        .fa-location-arrow:before {
            color: rebeccapurple;
        }

        .fa-mobile-phone:before,
        .fa-mobile:before {
            color: black;
        }

        .fa-map-marker:before {
            color: #1ab394;
        }

        table-th {
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        }

        table tr {
            height: 40px;
        }

        #productTree {
            width: 320px;
            max-height: 376px;
            min-height: 32px;
            overflow-y: auto;
            padding: 10px 10px 0;
        }

        .projectDetaiTreeWrap {
            width: 320px;
            max-height: 500px;
            padding: 10px 10px 0;
            top: 260px !important;
        }

        .dropdown-ul {
            left: -173px !important;
            right: 0 !important;
            padding: 5px 5px !important;
        }

        .proTreeWrap {
            position: absolute;
            left: 110px !important;
            background: #fff;
            border: 1px solid #ccc;
        }

        .proTreeWrap .btn-wrap {
            margin: 10px 0;
            text-align: center;
            padding-top: 8px;
            border-top: 1px dashed #ccc;
        }

        .checkbox label,
        .radio label {
            padding-left: 15px;
        }

        .search {
            float: left;
            padding: 0px 10px 0px 0px;
        }

        .tooltip-inner {
            max-width: 650px;
            text-align: left;
        }
    </style>
</head>

<body class="content-container">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>推广管理</a></li>
                        <li><a>广告列表</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <div class="search-condition">
                        <div>
                            <div class="filter-wrapper">
                                <ul class="clearfix">
                                    <li class="filter-item ">
                                        <label>链接类别</label>
                                        <div>
                                            <select v-select2 id="category">
                                                <option value='0'>全部</option>
                                                <option value='1'>促销活动</option>
                                                <option value='2'>商品详情</option>
                                            </select>
                                        </div>
                                    </li>
                                    <li class="filter-item">
                                        <a class="revision-btn revision-btn-search">搜索</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                        <div class="alert alert-info" style="margin-bottom: 0px">
                            <a class="revision-btn" v-on:click="addShow()">新增</a>
                            <a class="revision-btn" v-on:click="batchDelete()">批量删除</a>&nbsp;&nbsp;
                            <!-- <a class="revision-btn" v-on:click="exportShow()">导入</a>
                            <a class="revision-btn" v-on:click="exportShow()">导出</a> -->
                            <span>总条数：<span>12 条</span></span>&nbsp;&nbsp;
                            <!-- <span>总计金额<span>528,00.00</span></span>&nbsp;&nbsp;
                            <span>实退金额<span>528,00.00</span></span> -->
                        </div>
                    </div>
                    <table class="table table-hover table-bordered">
                        <thead>
                        <tr>
                            <th><input class="revision-checkbox" type="checkbox"></th>
                            <th>图片</th>
                            <th>启用状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <input class="revision-checkbox" type="checkbox">
                            </td>
                            <td>
                                <span>图片1</span>
                            </td>
                            <td class="text-navy">已启用</td>
                            <td>2019-08-01</td>
                            <td>
                                <a href="javascript:;" class="" v-on:click="detailShow()">编辑</a>
                                <a href="" class="">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input class="revision-checkbox" type="checkbox">
                            </td>
                            <td>
                                <span>图片2</span>
                            </td>
                            <td class="text-danger">未启用</td>
                            <td>2019-08-31</td>
                            <td>
                                <a href="javascript:;" class="" v-on:click="detailShow()">编辑</a>
                                <a href="" class="">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div style="display: none;" v-show="pageInit">
            <!-- 商品新增 -->
            <modal v-bind:show.sync="addModal.show" v-bind:style="addModal .style"
                   v-bind:add-class="addModal.addClass">
                <h4 slot="header">新增广告</h4>
                <div slot="body" class="clearfix">
                    <div>
                        <h3 class="panel-title">基本信息 </h3>
                    </div>
                    <form class="form-horizontal m-t" novalidate="novalidate">
                        <div class="form-group">
                            <label class="col-sm-1 control-label">图片</label>
                            <div class="col-sm-10">
                                <div class="file-loading">
                                    <input id="file-es" multiple name="file-es[]" type="file">
                                </div>
                            </div>
                        </div>
                        <div>
                            <h3 class="panel-title">广告链接选择</h3>
                        </div>
                        <div class="form-group">
                            <div class="filter-wrapper">
                                <ul class="col-sm-1 control-label">
                                    <li class="filter-item ">
                                        <label>链接类别</label>
                                        <div>
                                            <select v-select2 id="category">
                                                <option value='0'>全部</option>
                                                <option value='1'>促销活动</option>
                                                <option value='2'>商品详情</option>
                                            </select>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div>
                            <h3 class="panel-title">启用状态</h3>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-1 control-label">启用选择</label>
                            <div class="col-sm-4" style="margin-top: 6px;">
                                <input type="radio" class="cus-radio" name="status" value="2" checked><span
                                    class="spanchk">启用</span>
                                <input type="radio" class="cus-radio" name="status" value="1"> <span
                                    class="spanchk">禁用</span>
                            </div>
                        </div>
                    </form>
                </div>
                <div slot="footer" style="text-align:center">
                    <a href="javascript:;" class="revision-btn">确定</a>
                    <a href="javascript:;" class="revision-btn-default" v-on:click="this.addModal.close()"> 取消</a>
                </div>
            </modal>
            <!-- 广告详情 -->
            <modal v-bind:show.sync="detailModal.show" v-bind:style="detailModal .style"
                   v-bind:add-class="detailModal.addClass">
                <h4 slot="header">图片1</h4>
                <div slot="body" class="clearfix">
                    <div>
                        <h3 class="panel-title">基本信息 </h3>
                    </div>
                    <form class="form-horizontal m-t" novalidate="novalidate">
                        <div class="form-group">
                            <label class="col-sm-1 control-label">图片</label>
                            <div class="col-sm-10">
                                <div class="file-loading">
                                    <input id="file-es1" multiple name="file-es[]" type="file">
                                </div>
                            </div>
                        </div>
                        <div>
                            <h3 class="panel-title">广告链接选择</h3>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-1 control-label">链接类别</label>
                                <div class="col-sm-4">
                                    <select class="form-control">
                                        <option>全部</option>
                                        <option>促销活动</option>
                                        <option>商品详情</option>
                                    </select>
                                </div>
                        </div>
                        <div>
                            <h3 class="panel-title">启用状态</h3>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-1 control-label">启用选择</label>
                            <div class="col-sm-4" style="margin-top: 6px;">
                                <input type="radio" class="cus-radio" name="status" value="2" checked><span
                                    class="spanchk">启用</span>
                                <input type="radio" class="cus-radio" name="status" value="1"> <span
                                    class="spanchk">禁用</span>
                            </div>
                        </div>
                    </form>
                </div>
            </modal>
        </div>
        <div class="treeWrap projectTreeWrap none" style="width:320px;">
            <div>
                <input type="text" class="fill-item" v-model="treeModel.searchText"
                       style="display:inline;width:140px;" />
                <a class="revision-btn" style="cursor:pointer;margin-top: -3px;min-width: 56px;"
                   v-on:click="treeModel.search">搜索</a>
                <a class="revision-btn" style="cursor:pointer;margin-top: -3px;min-width: 56px;"
                   v-show="treeModel.searchResultMax>0" v-on:click="treeModel.searchNext">下一个</a>
            </div>
            <ul id="productTree" class="ztree" style="margin-left: -12px;"></ul>
            <div class="btn-wrap">
                <a href="javascript:;" class="revision-btn-default width56">取消</a>
                <a href="javascript:;" class="revision-btn width56">确定</a>
            </div>
        </div>

    </div>
</div>
<script src="../content/js/lib/vue/vue.min.js"></script>
<script src="../content/static/js/jquery.min.js?v=2.1.4"></script>
<script src="../content/static/js/bootstrap.min.js?v=3.3.5"></script>
<script src="../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../content/static/js/content.min.js?v=1.0.0"></script>
<script src="../content/js/lib/vue/vue-modal.js"></script>
<script src="../content/js/lib/vue/vue-pagination.js"></script>
<script src="../content/js/lib/calendar/calendar.js"></script>
<script src="../content/js/lib/calendar/scrollbar.js"></script>
<script src="../content/js/common.js"></script>
<script src="../content/js/lib/vue/select2.js"></script>
<script src="../content/static/js/plugins/bootstrap-fileinput/js/fileinput.js"></script>
<script src="../content/static/js/plugins/bootstrap-fileinput/js/plugins/sortable.js"></script>
<script src="../content/static/js/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
<script src="../content/static/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<!-- <script src="../content/static/js/demo/form-advanced-demo.min.js"></script> -->
<script src="../content/static/js/plugins/iCheck/icheck.min.js"></script>
<script src="../content/static/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#category").select2({
            width: "220px"
        });
        $("#status").select2({
            width: "220px"
        });
        //时间验证
        var calObj = new $.Calendar({
            //time: true,
            skin: 'white'
        });

        $('#costTimeStart').focus(function () {
            var $this = $(this),
                val = $this.val(),
                endTime = $('#costTimeEnd').val();
            calObj.pick({
                elem: this,
                endDate: endTime
            });
        });
        $('#costTimeEnd').focus(function () {
            var $this = $(this),
                val = $this.val(),
                startTime = $('#costTimeStart').val();
            calObj.pick({
                elem: this,
                startDate: startTime
            });
        });

    })
    var vmData = {
        addModal: {
            show: false,
            style: {
                width: '980px',
                height: "auto"
            },
            addClass: 'scroll-modal',
            func: {
                type: Function
            },
            close: function () {
                vm.addModal.show = false;
            }
        },
        detailModal: {
            show: false,
            style: {
                width: '980px',
                height: "auto"
            },
            addClass: 'scroll-modal',
            func: {
                type: Function
            },
            close: function () {
                vm.detailModal.show = false;
            }
        },
        treeProject: '',
        treeIds: {
            checkedId: '',
            paramId: ''
        },
        treeModel: {
            searchText: '',
            searchResultMax: 0,
            search: function () {
                count = 0;
                treeObj = [];
                var lastName = vm.treeModel.searchText;
                treeObj = $.fn.zTree.getZTreeObj("productTree");
                treeObj.cancelSelectedNode();
                //通过名称模糊搜索，也可通过Id查找
                nodes = treeObj.getNodesByParamFuzzy("text", lastName, null);
                treeObj.selectNode(nodes[0]);
                vm.treeModel.searchResultMax = nodes.length - 1;
            },
            searchNext: function searchNext() {
                count++;
                treeObj.selectNode(nodes[count]);
                if (count == nodes.length - 1) {
                    count = -1;
                }
            }
        },
        chkflg: false,
        radioflg: false,
    };
    vmData = $.extend(vmData, baseData);
    var vmMothod = {
        init: function () {},
        addShow: function () {
            vm.addModal.show = true;
            // vm.loadTree(1, 2, "#proTree");
            $('#file-es').fileinput({
                language: 'zh',
                uploadUrl: '#',
                allowedFileExtensions: ['jpg', 'png', 'gif']
            });
            $('#file-es1').fileinput({
                language: 'zh',
                uploadUrl: '#',
                allowedFileExtensions: ['jpg', 'png', 'gif']
            });
            $('.tree').click(function () {
                if ($(this).hasClass('project')) {
                    $treeWrap = $('.projectDetaiTreeWrap');
                }
                var $this = $(this),
                    pos = $this.offset();
                if ($treeWrap.hasClass('none')) {
                    $treeWrap.css({
                        left: pos.left,
                        top: pos.top + $this.height()
                    }).removeClass('none');
                } else {
                    $treeWrap.addClass('none');
                }
            });
            $('.proTreeWrap .btn-wrap a').click(function (e) {
                var targetClass = e.target.className;
                if (targetClass.indexOf('btn-success') > -1) {
                    vm.projectId.paramId = vm.projectId.checkedId;
                    if (vm.projectId.paramId === '') {
                        $('.tree.project').html('未选择').addClass('no-project');
                    } else {
                        $('.tree.project').html('已选择').removeClass('no-project');
                    }
                }
                $('.proTreeWrap').addClass('none');
            });
            var testdataBsSuggest = $("#test_data").bsSuggest({
                indexId: 2,
                indexKey: 1,
                data: {
                    "value": [{
                        "id": "0",
                        "word": "板",
                        "description": "板"
                    }, {
                        "id": "1",
                        "word": "包",
                        "description": "包"
                    }, {
                        "id": "2",
                        "word": "杯",
                        "description": "杯"
                    }, {
                        "id": "3",
                        "word": "袋",
                        "description": "袋"
                    }, {
                        "id": "4",
                        "word": "个",
                        "description": "个"
                    }, {
                        "id": "5",
                        "word": "公斤",
                        "description": "公斤"
                    }, {
                        "id": "6",
                        "word": "罐",
                        "description": "罐"
                    }, {
                        "id": "7",
                        "word": "毫升",
                        "description": "毫升"
                    }, {
                        "id": "8",
                        "word": "件",
                        "description": "件"
                    }, {
                        "id": "9",
                        "word": "斤",
                        "description": "斤"
                    }, {
                        "id": "10",
                        "word": "卷",
                        "description": "卷"
                    }, {
                        "id": "11",
                        "word": "卡",
                        "description": "卡"
                    }, {
                        "id": "12",
                        "word": "克",
                        "description": "克"
                    }, {
                        "id": "13",
                        "word": "粒",
                        "description": "粒"
                    }, {
                        "id": "14",
                        "word": "米",
                        "description": "米"
                    }, {
                        "id": "15",
                        "word": "瓶",
                        "description": "瓶"
                    }, {
                        "id": "16",
                        "word": "升",
                        "description": "升"
                    }, {
                        "id": "17",
                        "word": "双",
                        "description": "双"
                    }, {
                        "id": "18",
                        "word": "台",
                        "description": "台"
                    }, {
                        "id": "19",
                        "word": "套",
                        "description": "套"
                    }, {
                        "id": "20",
                        "word": "条",
                        "description": "条"
                    }, {
                        "id": "21",
                        "word": "筒",
                        "description": "筒"
                    }, {
                        "id": "22",
                        "word": "箱",
                        "description": "箱"
                    }, {
                        "id": "23",
                        "word": "张",
                        "description": "张"
                    }, {
                        "id": "24",
                        "word": "支",
                        "description": "支"
                    }],
                    "defaults": ""
                }
            });
        },
        checkSame: function (e) {
            var target = e.target,
                checkStatus = target.checked;
            if (checkStatus) {
                vm.$set("chkflg", true);
            } else {
                vm.$set("chkflg", false);
            }
        },
        detailShow: function () {
            vm.detailModal.show = true;
        },
        setCheckId: function (checkNodes, type) {
            var treeNode = [];
            checkNodes = checkNodes || [];
            var len = checkNodes.length,
                arr = [];
            while (len) {
                var treeChildNode = {
                    Id: "",
                    ChildIds: []
                };
                var item = checkNodes[len - 1],
                    status = item.getCheckStatus();
                if (status.checked) {
                    arr.push(item.id);
                    treeChildNode.Id = item.id;
                    if (item.ChildNodes != undefined) {
                        for (var i = 0; i < item.ChildNodes.length; i++) {
                            if (item.ChildNodes[i].getCheckStatus().checked == true)
                                treeChildNode.ChildIds.push(item.ChildNodes[i].id);
                        }
                    }
                }
                treeNode.push(treeChildNode);
                len--;
            }
            vm.treeProject = JSON.stringify(treeNode);
            vm[type].checkedId = arr.join(',');
        },

    };
    vmMothod = $.extend(vmMothod, baseCommonFunction);
    var vm = new Vue({
        el: '.content-container',
        data: vmData,
        methods: vmMothod
    });
    vm.init();
</script>
</body>

</html>
